const a = 800;
const b = 400;
const r = 100;
var randomInts = [];

function nextInt(start, end) {
    return Math.floor(Math.random() * (end - start) + start)
}

function setup() {
    createCanvas(a, b);
    background(100);//设置背景 遮盖之前作图
    //创建二维数组有些麻烦，存放随机数等待随机取形状
    for (let m = 0; m < b / r; m++) {
        randomInts[m] = [];
        for (let n = 0; n < a / r; n++) {
            //注意这里0 8 等代表的是if else图片的种类
            randomInts[m][n] = nextInt(0, 8)
        }
    }
    console.log(randomInts);

}

function draw() {
    //双重循环对应二位表格 外层是列，内层是一行的各个取值，我有个习惯，是先写内循环再套外循环，可能会清楚简单一些
    for (let j = 0; j < b / r; j++) {
        for (let i = 0; i < a / r; i++) {
            one(i * r, j * r, randomInts[j][i], r)
        }
    }
    fill(0,0,255);
    //可以继续画出下面的线段等
    // for (let j = 0; j < b / r; j++) {
    //     for (let i = 0; i < a / r; i++) {
    //
    //         two(i * r, j * r,1/randomInts[j][i]*r, r)
    //     }
    // }

}

/*StartX StartY 定义为绘图区坐标系的原点，而不是待画圆的圆心，当然更不是画板canvas的原点
* type 为类型，一个完整园的四分之一有四种样式，当然可以继续扩展，此处可以用switch语句，
* r为绘图区长度，等于待绘圆的半径，待绘矩形的长，注意这里用的是半径概念，当然可以改用直径
* */

//扩展一下可以画出更多图形
function one(startX, startY, type, r) {
    let d = 2 * r;
    let e=r/2;
    if (type === 0) {
        arc(startX, startY, d, d, 0 * PI, 0.5 * PI);
    } else if (type === 1) {
        arc(startX + r, startY, d, d, 0.5 * PI, 1 * PI);
    } else if (type === 2) {
        arc(startX + r, startY + r, d, d, 1 * PI, 1.5 * PI);
    } else if(type===3){
        arc(startX, startY + r, d, d, 1.5 * PI, 2 * PI);
    } else if (type===4){
        rect(startX,startY,r,e)
    }else if (type===5){
        rect(startX+e,startY,e,r)
    }else if (type===6){
        rect(startX,startY+e,r,e)
    }else if (type===7){
        rect(startX,startY,e,r)
    }
}
//当然也可以通过集合方式，例如这里的方法只会画出线段。
function two(startX, startY,d,r) {
    strokeWeight(1)
    beginShape()
    //d 作为一个随机偏移量 这里的直线是关于绘图区中心对称的
    vertex(startX+d, startY)
    vertex(startX+r-d, startY+r)
    // 结束绘制图形
    endShape()
}